<template>
  <div class="main">
    <basic-layout :title="title" :showFilterBtn="true" :showAddBtn="false"
                  @handleFilter="$refs.queryPopupRef.show = true">

      <van-tabs v-model:active="active" @click="tabClick">
        <van-tab title="楼宇设备"></van-tab>
        <van-tab title="服务设备"></van-tab>
      </van-tabs>
      <div>
        <van-row class="listCard">
          <van-pull-refresh
            v-if="dataList.length"
            style="min-height: 100%;"
            class="cardVanPullRefresh1"
            v-model="refreshing"
            @refresh="onRefresh">
            <van-list
              v-if="dataList.length > 0"
              v-model="loading"
              :finished="finished"
              finished-text="已经到底"
              @load="nextPage"
            >
              <div v-for="item in dataList" class="dataStyle" @click="jumpToDetial(item)">
                <div class="hengXian">
                  <div class="dataBStyle">
                    <div class="listLeft">
                      <span class="ziti">{{ item.XUNJJHMC }}</span>
                    </div>
                    <div class="dh">
                      <span style="color: #aaa">{{ item.XUNSGDH }}</span>
                      <div class="aImgStyle1">
                        <span v-if="item.SHENHZT === '06'" style="color: green">已巡视</span>
                        <span v-if="item.SHENHZT === '05'" style="color: red">待巡视</span>
                        <span v-if="item.SHENHZT === '07'" style="color: blue">巡视中</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="listMain">
                  <div class="sh">
                    <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">设备类别:&nbsp;&nbsp;&nbsp;&nbsp;</span>{{
                      item.XUNSFWMC
                    }}
                  </div>
                  <div class="sh">
                    <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">开始时间:&nbsp;&nbsp;&nbsp;&nbsp;</span>{{
                      item.XUNSKSSJ
                    }}
                  </div>
                  <div class="sh">
                    <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">结束时间:&nbsp;&nbsp;&nbsp;&nbsp;</span>{{
                      item.XUNSJSSJ
                    }}
                  </div>
                  <div>
                    <div class="downOtherProcess">
                      <van-progress
                        :percentage="(item.YIXSSL/item.DUIXZS)*100"
                        color="rgb(100,171,224)"
                        track-color="#aaa"
                        style="margin-left: 10px;"
                      />
                    </div>
                    <div class="downOtherText">
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span v-if="item.YIXSSL === item.DUIXZS"
                                                                 style="color: green">{{ item.YIXSSL }}</span>
                      <span v-if="item.YIXSSL !== item.DUIXZS"
                            style="color: red">{{ item.YIXSSL }}</span>/{{ item.DUIXZS }}
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>

        </van-row>
      </div>
      <!--          打开右侧搜索栏-->
      <queryPopup ref="queryPopupRef" @handleSearch="defineSearch" @handleReset="handleReset">
        <van-form class="filterBox">
          <label>工单状态：</label>
          <van-field>
            <template #input>
              <div class="textCon" @click="filterButton(1)">
                <span v-if="filterData.statusVal != '1'">请选择</span>
                <span v-else>{{ filterData.name }}</span>
              </div>
            </template>
          </van-field>
          <label>是否预警：</label>
          <van-field>
            <template #input>
              <div class="textCon" @click="filterButton(2)">
                <span v-if="filterData.warningVal != '1'">请选择</span>
                <span v-else>{{ filterData.warningName }}</span>
              </div>
            </template>
          </van-field>
          <label>计划日期：</label>
          <van-field>
            <template #input>
              <div class="textCon" @click="filterButton(3)">
                <span v-if="filterData.dateVal == '1'">{{ filterData.date }}</span>
                <span v-else>计划日期</span>
              </div>
            </template>
          </van-field>
        </van-form>
      </queryPopup>
      <!--工单状态选择 -->
      <van-action-sheet
        v-model="showLevel"
        cancel-text="取消"
        :actions="levelList"
        @select="valPopup"
      />
      <!--是否预警选择 -->
      <van-action-sheet
        v-model="showList"
        cancel-text="取消"
        :actions="earlyList"
        @select="valPopup"
      />
      <!-- 日期 -->
      <van-calendar
        v-model="showTime"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="valPopup"
      />
    </basic-layout>
  </div>

</template>
<script>
import { shebxjList } from '@/api/srvAssurance/assetLabel/assetLabel'

export default {
  components: {},
  data () {
    return {
      title: '设备巡检',
      datetimeStr: '',
      active: 0,
      checkFilter: null,
      filterData: {
        statusVal: null,
        name: null,
        status: null,
        warningVal: null,
        warningName: null,
        warning: null,
        dateVal: null,
        date: null,
      },
      queryParam: {
        status: null,
        warning: null,
        date: null,
        type: '0',
        pageIndex: 1,
        pageSize: 10,
      },
      dataList: [],
      loading: false, // 加载下一页
      finished: false, // 是否加载完了
      refreshing: false,
      showLevel: false,
      showList: false,
      showTime: false,
      minDate: new Date(new Date().getFullYear(), 0, 1),
      maxDate: new Date(new Date().getFullYear(), 11, 31),
      levelList: [
        {
          name: '全部',
          value: ''
        },
        {
          name: '待巡视',
          value: '05'
        },
        {
          name: '已巡视',
          value: '06'
        },
        {
          name: '巡视中',
          value: '07'
        },
      ],
      earlyList: [
        {
          name: '全部',
          value: ''
        },
        {
          name: '已预警',
          value: 'true'
        },
        {
          name: '未预警',
          value: 'false'
        },
      ]
    }
  },

  created () {
    this.datetimeStr = this.timeData()
    this.initData()
  },

  methods: {
    // goBack() {
    //   this.$router.back();
    // },
    async initData () {
      this.queryParam.pageIndex = 1
      this.finished = false
      this.refreshing = true
      await this.getDataList()
      this.refreshing = false
    },
    defineSearch () {
      this.$refs.queryPopupRef.show = false
      this.onRefresh()
    },
    // 下拉刷新
    onRefresh () {
      this.initData()
    },

    // 加载下一页
    nextPage () {
      // 判断第一次查出来的数据是否还有下一页数据，如果没有则不调接口
      if (this.dataList.length < (this.queryParam.pageIndex * this.queryParam.pageSize)) {
        this.finished = true
        return
      }
      setTimeout(() => {
        this.queryParam.pageIndex += 1
        this.getDataList()
      }, 1000)
    },

    async getDataList () {
      // console.log(this.queryParam)
      let res = await shebxjList(this.queryParam)
      if (res.status === 0) {
        if (this.queryParam.pageIndex === 1) {
          // 清空列表数据
          this.dataList = []
        }
        this.dataList = this.dataList.concat(res.data)
        // 如果数据加载完毕，finished 标志位置为 true，滑到页面底部则不会再触发 nextPage() 方法了。
        if (this.dataList.length >= res.totalCount) {
          this.finished = true
        }
      }
      this.loading = false
    },

    jumpToDetial (item) {
      item.type = this.queryParam.type
      item.ZHut = false
      console.log(item)
      this.$router.push({
        path: '/inspectionPlan/inspectionView',
        query: {
          dataInfo: item
        }
      })
    },
    timeData () {
      let now = new Date()

      // 格式化日期和时间
      let year = now.getFullYear()
      let month = ('0' + (now.getMonth() + 1)).slice(-2)
      let day = ('0' + now.getDate()).slice(-2)
      let hour = ('0' + now.getHours()).slice(-2)
      let minute = ('0' + now.getMinutes()).slice(-2)
      let second = ('0' + now.getSeconds()).slice(-2)

      // 构造时间字符串
      let timeStr = `${year}-${month}-${day} ${hour}:${minute}:${second}`
      return timeStr
    },
    handleReset () {
      this.queryParam = {
        status: null,
        warning: null,
        date: null,
        type: '0',
        pageIndex: 1,
        pageSize: 10,
        }
     this.filterData.statusVal = null
     this.filterData.warningVal = null
     this.filterData.dateVal = null
      // this.filterData = {
      //     statusVal: null,
      //     warningName: null,
      //     date: null,
      // }
      this.initData()
    },
    tabClick (val) {
      console.log(val)
      this.filterDataClear()
      this.queryParamClear()
      this.queryParam.type = val
      this.initData()
    },

    filterButton (val) {
      this.checkFilter = val
      console.log(val)
      if (val === 1) {
        this.showLevel = true
      } else if (val === 2) {
        this.showList = true
      } else if (val === 3) {
        this.showTime = true
      }
    },
    valPopup (item) {
      if (this.checkFilter === 1) {
        this.filterData.statusVal = 1
        this.filterData.status = item.value
        this.filterData.name = item.name
        this.showLevel = false
      } else if (this.checkFilter === 2) {
        this.filterData.warningVal = '1'
        this.filterData.warning = item.value
        this.filterData.warningName = item.name
        this.showList = false
      } else if (this.checkFilter === 3) {
        this.filterData.dateVal = '1'
        let time = new Date(item).format('yyyy-MM-dd')
        this.filterData.date = time
        this.showTime = false
      }
      this.queryParamInit()
    },

    queryParamInit () {
      this.queryParam.status = this.filterData.status
      this.queryParam.warning = this.filterData.warning
      this.queryParam.date = this.filterData.date
      this.initData()
    },

    filterDataClear () {
      this.filterData.statusVal = null
      this.filterData.status = null
      this.filterData.warningVal = null
      this.filterData.warning = null
      this.filterData.dateVal = null
      this.filterData.date = null
    },
    queryParamClear () {
      this.queryParam.status = null
      this.queryParam.warning = null
      this.queryParam.date = null
    },
  }
}
</script>

<style scoped lang="less">
.main {
  height: 80%;
  background-color: #8080803b;
  .listCard {
    .cardVanPullRefresh1 {
      .dataStyle {
        height: 168px;
        margin: 10px;
        background-color: #FFFFFF;
        line-height: 23px;
        border-radius: 3px;
        font-size: 0.4rem;
        .hengXian {
          box-sizing: border-box;
          border-bottom: 1px solid #eee;
          line-height: 0.64rem;
        }

        .dataBStyle {
          height: 55px;
          position: relative;

          .listLeft {
            margin-left: 10px;
            font-size: 0.4rem;
            font-weight: bold;
            padding-top: 9px;

            .ziti {
              margin-top: 1px;
            }

          }

          .dh {
            margin-left: 10px;
            font-size: 0.3rem;

            .aImgStyle1 {
              position: absolute;
              top: 0.4667rem;
              right: 0.68rem;
              font-size: 15px;
              margin-left: 78%;
            }
          }
        }


        .listMain {
          line-height: 29px;
          position: relative;

          .downOtherProcess {
            width: 80%;
            float: left;
          }

          .downOtherText {
            transform: translateY(-5px);
            width: 100%;
          }
        }
      }

      /deep/ .van-progress__pivot {
        display: none;
      }

      /deep/ .van-progress {
        height: 11px;
        margin-top: 4px;
      }

      .custom-image {
        height: 100%;
      }
    }
  }

  /deep/ .van-tabs__line {
    background: #4eb3e9;
  }

  /deep/ .van-tabs__nav {
    background-color: #FFFFFF;
  }

  /deep/ .van-progress__pivot {
    display: none;
  }

  /deep/ .van-progress {
    height: 11px;
    margin-top: 4px;
  }
}
</style>
